---
import SingleVerticalListOfPokemonsVue from "@/components/examples/vue/SingleVerticalListOfPokemonsWithIsDraggable.vue";
import SingleVerticalListOfPokemonsSvelte from "@/components/examples/svelte/SingleVerticalListOfPokemonsWithIsDraggable.svelte";
import { SingleVerticalListOfPokemons as SingleVerticalListOfPokemonsReact } from "@/components/examples/react/SingleVerticalListOfPokemonsWithIsDraggable";
import PageComponent from "./shared/page-component.astro";
import { getI18N } from "@/i18n";

const { currentLocale } = Astro;
const { framework } = Astro.props;

const i18n = getI18N({ currentLocale });

const verticalList=`
<script setup lang="ts">
import { ref } from "vue";
import { useDragAndDrop } from "fluid-dnd/vue";
import type { Pokemon } from "./Pokemon";
import PokemonComponent from "./PokemonComponent.vue";
import { fetchPokemons } from "@/server/pokemonServer";

const pokemons = ref([] as Pokemon[]);
pokemons.value = await fetchPokemons(9);
const sizes = {
  100: "S",
  250: "M",
  1200: "L",
};
const getSize = (weight: number) => {
  for (const sizeLimit of Object.keys(sizes)) {
    const limit = parseFloat(sizeLimit) as keyof typeof sizes;
    if (weight < limit) {
      return sizes[limit];
    }
  }
};
const [ parent ] = useDragAndDrop(pokemons, {
  isDraggable: (el) => !el.classList.contains("is-not-draggable"),
  draggingClass: "dragging-pokemon",
});
</script>
<template>
  <div class="flex max-sm:justify-center items-start">
    <div
      ref="parent"
      class="bg-gray-200/60 border-solid border-black/40 rounded-2xl w-60 border-4 p-4 block"
    >
      <PokemonComponent
        v-for="(pokemon, index) in pokemons"
        :key="pokemon.name"
        :index="index"
        :pokemon="pokemon"
        :class="{
          'is-not-draggable': getSize(pokemon.weight) === 'L',
        }"
      />
    </div>
  </div>
</template>
<style>
.is-not-draggable {
  background-color: gray !important;
}
</style>
`
const verticalListSvelteCode=`
<script lang="ts">
import { useDragAndDrop } from "fluid-dnd/svelte";
import type { Pokemon } from "../Pokemon";
import PokemonComponent from "@/components/examples/svelte/PokemonComponent.svelte";
import { fetchPokemons } from "@/server/pokemonServer";

const pokemons = $state([] as Pokemon[]);
fetchPokemons(9).then((newPokemons) => {
  pokemons.push(...newPokemons);
});
const sizes = {
  100: "S",
  250: "M",
  1200: "L",
};
const getSize = (weight: number) => {
  for (const sizeLimit of Object.keys(sizes)) {
    const limit = parseFloat(sizeLimit) as keyof typeof sizes;
    if (weight < limit) {
      return sizes[limit];
    }
  }
};
const [ parent ] = useDragAndDrop(pokemons, {
  isDraggable: (el) => !el.classList.contains("is-not-draggable"),
  draggingClass: "dragging-pokemon",
});
</script>
<div class="flex max-sm:justify-center items-start">
  <div
    use:parent
    class="bg-gray-200/60 border-solid border-black/40 rounded-2xl w-60 border-4 p-4 block"
  >
    {#each pokemons as pokemon, index (pokemon.name)}
      <PokemonComponent
        index={index}
        pokemon={pokemon}
        class={getSize(pokemon.weight) === 'L'?'is-not-draggable':''} 
      />
    {/each}
  </div>
</div>
`
const verticalListReactCode=`
import { useDragAndDrop } from "fluid-dnd/react";
import type { Pokemon } from "../Pokemon";
import { fetchPokemons } from "@/server/pokemonServer";
import { PokemonComponent } from "./PokemonComponent";
import { useEffect } from "react";
const sizes = {
  100: "S",
  250: "M",
  1200: "L",
};
const getSize = (weight: number) => {
  for (const sizeLimit of Object.keys(sizes)) {
    const limit = parseFloat(sizeLimit) as keyof typeof sizes;
    if (weight < limit) {
      return sizes[limit];
    }
  }
};
export const SingleVerticalListOfPokemons: React.FC = () => {
  const [ parent, listOfPokemons, setPokemons ] = useDragAndDrop<Pokemon, HTMLDivElement>([], {
    isDraggable: (el) => !el.classList.contains("is-not-draggable"),
    draggingClass: "dragging-pokemon",
  });
  useEffect(() => { 
      const fetchPokemonse = async () => {
          const newPokemons = await fetchPokemons(9);
          setPokemons(newPokemons);
      }
      fetchPokemonse();
  }, [])

  return (
    <div className="flex max-sm:justify-center items-start">
      <div
        ref={parent}
        className="bg-gray-200/60 border-solid border-black/40 rounded-2xl w-60 border-4 p-4 block"
      >
        {
          listOfPokemons.map((pokemon, index) => (
            <PokemonComponent
              key={pokemon.name}
              index={index}
              pokemon={pokemon}
              className={getSize(pokemon.weight) === 'L'?'is-not-draggable':''} 
            />
          ))
        }
      </div>
    </div>
  )
}
`
const fileName = 'SingleVerticalListOfPokemonsWithIsDraggable';
---
<PageComponent title={i18n.SINGLE_VERTICAL_IS_DRAGGABLE} framework={framework} vueCode={verticalList} svelteCode={verticalListSvelteCode} reactCode={verticalListReactCode} fileName={fileName}>
  <fragment slot="vue">
    <SingleVerticalListOfPokemonsVue client:load />
  </fragment>
  <fragment slot="svelte">
    <SingleVerticalListOfPokemonsSvelte client:load />
  </fragment>
  <fragment slot="react">
    <SingleVerticalListOfPokemonsReact client:load />
  </fragment>
</PageComponent>
